<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS 网页区块示例</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="font-sans bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md py-4">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <a href="#" class="text-xl font-bold text-blue-600">Logo</a>
            <div class="hidden md:flex space-x-8">
                <a href="#" class="text-gray-700 hover:text-blue-600 transition duration-300">首页</a>
                <a href="#" class="text-gray-700 hover:text-blue-600 transition duration-300">产品</a>
                <a href="#" class="text-gray-700 hover:text-blue-600 transition duration-300">服务</a>
                <a href="#" class="text-gray-700 hover:text-blue-600 transition duration-300">关于我们</a>
                <a href="#" class="text-gray-700 hover:text-blue-600 transition duration-300">联系我们</a>
            </div>
            <button
                class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-300">登录</button>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="bg-gradient-to-r from-blue-500 to-indigo-700 text-white py-20">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">打造出色的数字体验</h1>
            <p class="text-xl mb-10 max-w-2xl mx-auto">我们提供专业的网站设计与开发服务，帮助您的业务在数字世界中脱颖而出</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <button
                    class="bg-white text-blue-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition duration-300">了解更多</button>
                <button
                    class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-blue-600 transition duration-300">联系我们</button>
            </div>
        </div>
    </section>

    <!-- 功能特点展示 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">我们的优势</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center p-6 rounded-lg hover:shadow-lg transition duration-300">
                    <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">现代化设计</h3>
                    <p class="text-gray-600">采用最新设计趋势，打造美观且功能强大的用户界面</p>
                </div>
                <div class="text-center p-6 rounded-lg hover:shadow-lg transition duration-300">
                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">极致性能</h3>
                    <p class="text-gray-600">优化每一行代码，确保您的网站快速加载并流畅运行</p>
                </div>
                <div class="text-center p-6 rounded-lg hover:shadow-lg transition duration-300">
                    <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">用户为中心</h3>
                    <p class="text-gray-600">以用户体验为核心，确保每个设计决策都能满足用户需求</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 卡片网格 -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-4">精选项目</h2>
            <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">探索我们最近完成的一些成功案例，展示我们的专业能力和创造力</p>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
                    <img src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
                        alt="项目1" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">企业品牌网站</h3>
                        <p class="text-gray-600 mb-4">为科技公司打造的现代化企业形象网站</p>
                        <a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition duration-300">查看详情
                            &rarr;</a>
                    </div>
                </div>

                <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
                    <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
                        alt="项目2" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">电子商务平台</h3>
                        <p class="text-gray-600 mb-4">功能全面的在线商店，提供流畅购物体验</p>
                        <a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition duration-300">查看详情
                            &rarr;</a>
                    </div>
                </div>

                <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
                    <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
                        alt="项目3" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">移动应用界面</h3>
                        <p class="text-gray-600 mb-4">直观易用的移动应用UI/UX设计</p>
                        <a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition duration-300">查看详情
                            &rarr;</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials区域 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">客户评价</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-gray-300 rounded-full overflow-hidden mr-4">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80"
                                alt="客户1" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-semibold">张先生</h4>
                            <p class="text-gray-600 text-sm">科技公司CEO</p>
                        </div>
                    </div>
                    <p class="text-gray-700">"他们的专业团队为我们打造了出色的企业网站，用户体验和转化率都有了显著提升。"</p>
                </div>

                <div class="bg-gray-50 p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-gray-300 rounded-full overflow-hidden mr-4">
                            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80"
                                alt="客户2" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-semibold">李女士</h4>
                            <p class="text-gray-600 text-sm">电商总监</p>
                        </div>
                    </div>
                    <p class="text-gray-700">"新上线的电商平台让我们的销售额增长了40%，用户反馈也非常积极。"</p>
                </div>

                <div class="bg-gray-50 p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-gray-300 rounded-full overflow-hidden mr-4">
                            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80"
                                alt="客户3" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-semibold">王经理</h4>
                            <p class="text-gray-600 text-sm">创业公司创始人</p>
                        </div>
                    </div>
                    <p class="text-gray-700">"从概念到实现，他们全程提供了专业的建议和支持，帮助我们快速上线产品。"</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系表单 -->
    <section class="py-16 bg-gradient-to-r from-blue-500 to-indigo-700 text-white">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">联系我们</h2>
                <p class="text-blue-100">有兴趣与我们合作？请填写以下表单，我们的团队会尽快与您联系</p>
            </div>

            <form class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-lg">
                <div class="mb-6">
                    <label for="name" class="block text-gray-700 font-medium mb-2">您的姓名</label>
                    <input type="text" id="name"
                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div class="mb-6">
                    <label for="email" class="block text-gray-700 font-medium mb-2">电子邮箱</label>
                    <input type="email" id="email"
                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div class="mb-6">
                    <label for="message" class="block text-gray-700 font-medium mb-2">您的需求</label>
                    <textarea id="message" rows="4"
                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>

                <button type="submit"
                    class="w-full bg-blue-600 text-white py-3 rounded-md font-medium hover:bg-blue-700 transition duration-300">提交咨询</button>
            </form>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">公司名称</h3>
                    <p class="text-gray-400">提供专业的网站设计与开发服务，助力企业数字化转型</p>
                </div>

                <div>
                    <h4 class="font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">关于我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">服务</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">项目案例</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="font-semibold mb-4">服务项目</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">网站设计</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">应用开发</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">UI/UX设计</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">数字营销</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="font-semibold mb-4">联系我们</h4>
                    <address class="text-gray-400 not-italic">
                        <p>北京市朝阳区某某大厦</p>
                        <p class="my-2">电话: 010-12345678</p>
                        <p>邮箱: info@example.com</p>
                    </address>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
                <p>&copy; 2023 公司名称. 保留所有权利.</p>
            </div>
        </div>
    </footer>
</body>

</html>